<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
    <script src="../js/popConfirm.js"></script>
    <script src="../js/message.js"></script>
  </head>
  <body>
    <h3>PopConfirm弹出确认</h3>
    <p>在执行某项操作时使用，常用于删除操作。</p>
    <br>

    <h4>基本实例</h4>
    <section>
        <div class="example">
            <button class="btn-light btn-primary btn-medium" id="my-btn1">向下</button>
            <button class="btn-light btn-primary btn-medium" id="my-btn2">向上</button>
            <button class="btn-light btn-primary btn-medium" id="my-btn3">向左</button>
            <button class="btn-light btn-primary btn-medium" id="my-btn4">向右</button>
        </div>
        <pre class="javascript"><code>
	$('#my-btn').on('click', function(e) {
	    $(this).popConfirm({
	    	content: '确认删除这条记录吗？',
	    	onOK: function() {
	    		// Your code goes here...
	    		Message.success('删除成功！');
	    	}
	    })
	});
        </code></pre>
    </section>

    <h4>配置项</h4>
    <table class="table table-bordered doc-table">
        <thead>
            <tr>
                <th>名称</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>position</td>
                <td>String</td>
                <td>'bottom'</td>
                <td>
                	弹出框的显示方位
                	<br>
                	有效值：'top'，'bottom'，'left'，'right'
                </td>
            </tr>
            <tr>
                <td>content</td>
                <td>String</td>
                <td>空</td>
                <td>弹出框的文字</td>
            </tr>
            <tr>
                <td>onOK</td>
                <td>Function</td>
                <td>function() {}</td>
                <td>点击确认后执行</td>
            </tr>
        </tbody>
    </table>

    <script>
    $(document).ready(function() {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
    $('#my-btn1').on('click', function(e) {
        $(this).popConfirm({
        	content: '确认删除这条记录吗？',
        	onOK: function() {
        		Message.success('删除成功！');
        	}
        })
    });
    $('#my-btn2').on('click', function(e) {
        $(this).popConfirm({
        	position: 'top',
        	content: '确认删除这条记录吗？',
        	onOK: function() {
        		Message.success('删除成功！');
        	}
        })
    });
    $('#my-btn3').on('click', function(e) {
        $(this).popConfirm({
        	position: 'left',
        	content: '确认删除这条记录吗？',
        	onOK: function() {
        		Message.success('删除成功！');
        	}
        })
    });
    $('#my-btn4').on('click', function(e) {
        $(this).popConfirm({
        	position: 'right',
        	content: '确认删除这条记录吗？',
        	onOK: function() {
        		Message.success('删除成功！');
        	}
        })
    });
    </script>
  </body>
</html>